<template>
	<image src="../../static/img/userbg.png" class="xcxzcxcdrtrey" mode="widthFix"></image>
<view class="" >
	

	<view class="cxcfdrtytu">


		<view class=" pd">
			<image :src="userInfo.basic_info.avatar_url" class="xzcxvxcvdftry" mode="aspectFill"></image>
			<view class="cf fz40 mt20">
				<!-- {{userInfo.basic_info.nickname}} -->
				{{userInfo.basic_info.nick_name}}
			</view>
		</view>
	</view>
	<view class="">


		<view class=" cxctyxcrt gd act">
			<view class="czxcserfe pr ov  ">
				<image src="../../static/img/xiantiao.png" class="xzcxzcxrter" mode="widthFix"></image>
				<!-- 	<view class="ccxvcxvytru  ">

			</view> -->

				<template v-for="(sd,idx) in 5">
					<view class="cxcxztrtyyt " :class="'cxcxztrtyyt'+idx">
						<view class="ccxcgrtr">

						</view>
						<view class="cf mt10" v-if="(sd+(userInfo.profile_info.level_id-3))>0">
							v{{(sd+(userInfo.profile_info.level_id-3))}}
						</view>
					</view>
				</template>

				<!-- 	<view class="cxcxztrtyyt cxcxztrtyyt1">
				<view class="ccxcgrtr">

				</view>
				<view class="cf mt10">
					v4
				</view>
			</view>
			<view class="cxcxztrtyyt cxcxztrtyyt2">
				<view class="ccxcgrtr">

				</view>
				<view class="cf mt10">
					v5
				</view>
			</view>
			<view class="cxcxztrtyyt cxcxztrtyyt3">
				<view class="ccxcgrtr">

				</view>
				<view class="cf mt10">
					v6
				</view>
			</view>
			<view class="cxcxztrtyyt cxcxztrtyyt4">
				<view class="ccxcgrtr">

				</view>
				<view class="cf mt10">
					v7
				</view>
			</view> -->
			</view>
		</view>
	</view>


	<view class="pd">
		<view class="zxczxcrtxzrt pl50 pt20 pm30 pr">
			<view class="display-flex">
				<view class="flex-1 display-flex">
					<view class="fz70 ls b pf">
						<image class="zxcxzcsdtrdty" mode="widthFix" :src="userInfo.cur_level_info.level_number_icon"></image>
						<!-- V{{userInfo.profile_info.level_id}} -->
					</view>
					<view class="vertical-center ml20">
						<view class="cxcrtrecvtyyu vertical-center pl20 pr20">
							{{userInfo.cur_level_info.level_name}}
						</view>
					</view>
					<view class="ml20 vertical-center" @tap="jxcxdf=true">
						<image src="../../static/img/dfdsfdsa.png" class="xcxzcrtytryt"></image>
					</view>
				</view>
				<view class="">
					<image :src="userInfo.cur_level_info.level_badge_url" class="xzcxcrteryt"></image>
				</view>

			</view>
			<view class="mt20 display-flex">
				<view class="flex-1">
					<view class="fz48 cf">
						{{userInfo.profile_info.checkin_days}}
					</view>
					<view class="fz24 cf">
						连续打卡(天)
					</view>
				</view>
				<view class="flex-1">
					<view class="fz48 cf pf">
						{{userInfo.profile_info.score}}
					</view>
					<view class="fz24 cf">
						当前积分
					</view>
				</view>
				<view class="flex-1">
					<view class="fz48 cf">
						{{userInfo.profile_info.stay_hour}}
					</view>
					<view class="fz24 cf">
						累计学习(小时)
					</view>
				</view>
			</view>
		</view>
	<!-- @change="" -->
			<picker  :range="xcxrtxctruy" @change="xcxtrtrt">
		<view class="zxczxcrtxzrt pl30 pr20 pt30 pm30 pr  display-flex">
		
			
			<view class="flex-1 fz28 cf vertical-center tl">
				<!-- {{kxcxdfd}} -->
			 {{hnmxdrt(kxcxdfd)}}
			</view>
			<view class="vertical-center">
				<view class="cf fz28">
					<!-- <text class="cz">v5</text> -->
					<image src="../../static/img/xzcxzrt.png" class="xzcxzcdtreyry cz ml10"></image>
				</view>
			</view>
			
		</view>
		</picker>
	</view>

	<view class="kxzczxcrtecxt vertical-center" v-if="jxcxdf">
		<view class="pr" >
			<view class="pr">
				<image src="../../static/img/closedfdsf.png"
					class="zxczxrtrytry dfdczxcvxvty" @tap="jxcxdf=false"></image>
					
				<image :src="xczxdfdsf" class="xcxzcvfrt" mode="widthFix"></image>
			</view>
			<view class="mt40 cf cen">
				长按图片保存相册
				<!-- <image src="../../static/img/fenxiangbtn.png" class="cxcxzctrtxrt" mode="widthFix"></image> -->
			</view>
		</view>
	</view>
	</view>
	<view class="xzcadsfdsxedr" @tap='fuzhis(userInfo.user_id)'>
		{{userInfo.user_id}}
	</view>

</template>
<script lang="ts" setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { ref, computed } from "vue"
	import { hf, dxrequest, callBack } from "@/util/index.js"
	import { store } from "@/store/index.js"
import { jxcxzdf,zhsdr } from "@/util/tts.js"
	store.commit("getUserinfo")
	const xcxrtxctruy = ref([])
	const course_level= ref([])
	const xczxdfdsf = ref()
	const xcxzcert = ref()
	const jxcxdf = ref()
	const kxcxdfd = ref()
	zhsdr()
	const userInfo = computed(() => {
		const obj = store.state.userInfo
		kxcxdfd.value = obj.profile_info.course_level
		try {
			return obj
		} catch (e) {
			return {}
		}

	});
	const getappconfig = async()=>{
		const {data} = await dxrequest("api/child/app/config")
		course_level.value = data.course_level
		course_level.value.map(a=>{
			xcxrtxctruy.value.push(a.label)
		})	
	}
	getappconfig()
	
	const hnmxdrt = (data)=>{
		return course_level.value.filter(a=>a.value==data)[0].label
	}
	const xcxtrtrt = async(ev)=>{
		kxcxdfd.value = course_level.value[ev.detail.value].value
		const {data} = await dxrequest("api/child/user/updateProfile",{
			course_level:kxcxdfd.value
		},"post")
	}
	const getqcImg = async()=>{
		const {data} = await dxrequest("api/child/user/poster")
		xczxdfdsf.value = 'data:image/png;base64,'+data.poster
		xcxzcert.value = true
	}
	getqcImg()
	
	const jnxcdfg = async()=>{
		// const {data}  = await dxrequest("api/child/user/updateProfile",{
		// 	course_level:
		// })
	}
	const fuzhis = (text)=>{
		navigator.clipboard.writeText(text);
		uni.showToast({
			icon:'none',
			title:'复制成功！'
		})
	}
	
</script>


<style scoped>
	.xzcadsfdsxedr{
		position: fixed;
		left: 0;
		bottom: 50rpx;
		width: 100%;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
	}
	.cxcfdrtytu {
		padding: 150rpx 20rpx 20rpx 20rpx;
		text-align: center;
		position: relative;
		z-index: 100;
		height: 470rpx;

	}

	.czxcserfe {
		height: 120rpx;
		width: 680rpx;
		margin: auto;
		/* background: rgb(28, 34, 45);
		background: linear-gradient(90deg, rgba(19, 198, 72, 0) 0%, rgba(19, 198, 72, 0.3) 25%, rgba(19, 198, 72, 1) 50%, rgba(19, 198, 72, 0.3) 75%, rgba(19, 198, 72, 0) 100%);
		 */
		/* border-radius: 0px 0px 50% 50%/0 0px 100% 100%; */
		/* transition: all linear 10s;
			 animation:  xxcxrety 1.2s infinite; */

	}

	.cvcxtytr {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #fff;
	}

	@keyframes xxcxrety {
		0% {
			background:
				linear-gradient(90deg,
					rgba(19, 198, 72, 0) 0%,
					rgba(19, 198, 72, 0.4) 25%,
					rgba(19, 198, 72, 1) 50%,
					rgba(19, 198, 72, 0.3) 75%,
					rgba(19, 198, 72, 0) 100%);
		}

		100% {
			/* 	background: linear-gradient(90deg, rgba(19, 198, 72, 0) 0%, rgba(19, 198, 72, 0.3) 25%, rgba(19, 198, 72, 1) 50%, rgba(19, 198, 72, 0.3) 75%, rgba(19, 198, 72, 0) 100%);
		border-radius: 0px 0px 50% 50%/0 0px 100% 100%; */
		}
	}

	.cxctyxcrt {
		height: 190rpx;
		overflow: hidden;
		padding-top: 2rpx;
		position: relative;
		bottom: 40rpx;
	}

	.cxctyxcrt.act {
		width: 100%;
	}

	.ccxvcxvytru {
		position: absolute;
		left: 0;
		top: -18rpx;
		width: 100%;
		height: 110%;
		background: #1C222D;
		border-radius: 0px 0px 50% 50%/0 0px 100% 100%;

	}

	.xzcxvxcvdftry {
		width: 191rpx;
		height: 191rpx;
		border-radius: 50%;
		border: 6rpx solid #fff;
	}

	.ccxcgrtr {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #13C648;
	}

	.cxcxztrtyyt {
		position: absolute;
		left: 0;
		top: 20rpx;
		z-index: 100;
		opacity: 0.4;
	}

	.cxcxztrtyyt1 {
		left: 25%;
		top: 90rpx;
	}

	.cxcxztrtyyt2 {
		left: 48%;
		top: 96rpx;
		opacity: 1;
	}

	.cxcxztrtyyt2 .ccxcgrtr {
		width: 34rpx;
		height: 34rpx;
	}

	.cxcxztrtyyt3 {
		left: 74%;
		top: 86rpx;
	}

	.cxcxztrtyyt4 {
		left: 98%;
		top: 10rpx;
	}

	.zxczxcrtxzrt {
		background: radial-gradient(158% 124% at 92% 95%, #455167 0%, #333C4D 100%), #262E3C;
		border-radius: 24rpx;
		margin-top: 24rpx;
	}

	.cxcrtrecvtyyu {
		height: 70rpx;
		background: linear-gradient(38deg, rgba(19, 198, 72, 0.39) 0%, rgba(47, 54, 69, 0.11) 20%, rgba(28, 34, 45, 0) 74%, rgba(19, 198, 72, 0.53) 100%), rgba(21, 23, 24, 0.5);
		box-shadow: inset 0px 1rpx 3rpx 6rpx #1C222D;
		border-radius: 40rpx;
		border: 2rpx solid #13C648;

		font-weight: 500;
		font-size: 32rpx;
		color: #3EFF77;
		text-align: left;
		font-style: normal;
	}

	.xcxzcrtytryt {
		width: 32rpx;
		height: 31rpx;
	}

	.xzcxcrteryt {
		width: 161rpx;
		height: 154rpx;
		position: absolute;
		right: 20rpx;
		top: -50rpx;
	}

	.xzcxzcdtreyry {
		width: 26rpx;
		height: 26rpx;
	}

	.xzcxzcxrter {
		position: absolute;
		left: 0;
		top: -10rpx;
		width: 100%;
	}

	.xcxzcxcdrtrey {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
	.zxcxzcsdtrdty{
		width: 76rpx;
	}
	
</style>